<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>58同城 招聘数据</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.js"></script>
    <script src="map/js/shanghai.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="title" style="width: 600px;height:400px;"></div>
    <div id="exp" style="width: 600px;height:400px;"></div>
    <div id="edu" style="width: 600px;height:400px;"></div>
    <div id="area" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('title'));

        // 指定图表的配置项和数据
        option = {
            title : {
                text: '58同城招聘数据',
                subtext: '岗位分布',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['普工', '销售代表', '房产经纪人', '电话销售', '快递员', '服务员', '专车司机', '店员/营业员', '保安', '客服专员/助理']
            },
            series : [
                {
                    name: '岗位分布',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {name:'普工', value:14399},
                        {name:'销售代表', value:3758},
                        {name:'房产经纪人', value:1498},
                        {name:'电话销售', value:1477},
                        {name:'快递员', value:1434},
                        {name:'服务员', value:1299},
                        {name:'专车司机', value:1049},
                        {name:'店员/营业员', value:1023},
                        {name:'保安', value:931},
                        {name:'客服专员/助理', value:926},
                        {name:'其他', value:16179},
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    var myChart = echarts.init(document.getElementById('exp'));
    var option = {
        title: {
            text: '经验薪资'
        },
        xAxis : [
        {
            type : 'category',
            data : ['不限', '1年以下', '1-2年', '3-5年', '6-7年', '10年以上'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
        yAxis : [
        {
            type : 'value'
        }
    ],
        series : [
        {
            name: '经验薪资',
            type: 'bar',
            barWidth: '60%',
            data:[6221.9, 5063.0, 6815.9, 9573.6, 6000.0, 8000.0],
            itemStyle: {
                normal: {
                    label : {
                        show : true,
                        textStyle : {
                            fontSize : '13',
                            fontFamily : '微软雅黑',
                            fontWeight : 'bold'
                        }
                    }
                }
            },
        }]
    };
    myChart.setOption(option);

    var myChart = echarts.init(document.getElementById('edu'));
    var option = {
        title: {
            text: '学历薪资'
        },
        xAxis : [
        {
            type : 'category',
            data : ['不限', '高中', '技校', '中专', '大专', '本科'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
        yAxis : [
        {
            type : 'value'
        }
    ],
        series : [
        {
            name: '学历薪资',
            type: 'bar',
            barWidth: '60%',
            data:[6159.4, 7120.6, 6816.4, 5538.8, 7247.9, 9324.3],
            itemStyle: {
                normal: {
                    label : {
                        show : true,
                        textStyle : {
                            fontSize : '13',
                            fontFamily : '微软雅黑',
                            fontWeight : 'bold'
                        }
                    }
                }
            },
        }]
    };
    myChart.setOption(option);

    var myChart = echarts.init(document.getElementById('area'));
    var option = {
        dataRange: {
        min: 100,
        max: 12000,
        x: 'left',
        y: 'bottom',
        text:['高','低'],           // 文本，默认为数值文本
        calculable : true
    },
        series: [{
            name: '地区分布',
            type: 'map',
            mapType: '上海',
            roam: true,
            data:[
                {name:"闵行区", value:2698},
                {name:"宝山区", value:1405},
                {name:"杨浦区", value:837},
                {name:"海曙", value:423},
                {name:"松江区", value:9909},
                {name:"闸北区", value:549},
                {name:"青浦区", value:334},
                {name:"嘉定区", value:688},
                {name:"浦东新区", value:12308},
                {name:"上海", value:2849},
                {name:"卢湾区", value:463},
                {name:"徐汇区", value:5088},
                {name:"黄浦区", value:1443},
                {name:"静安区", value:828},
                {name:"虹口区", value:409},
                {name:"长宁区", value:543},
                {name:"普陀区", value:2320},
                {name:"奉贤区", value:59},
                {name:"南汇区", value:110},
                {name:"工业园", value:60},
                {name:"高新区", value:475},
                {name:"海淀", value:60},
                {name:"上海周边", value:13},
                {name:"金山区", value:55},
                {name:"昆山", value:20},
                {name:"崇明县", value:22},
                {name:"瓯海", value:5},
            ],
            selectedMode : 'single',
            itemStyle:{
                normal:{label:{show:true}},
                emphasis:{label:{show:true}}
            },
        }]
    };
    myChart.setOption(option);
    </script>
</body>
</html>